<template>
  <div>
    <van-row class="card" v-if="!data.isButton">
      <van-col :span="4" style="padding: 0.3125rem">
        <img :src="data.cardImg" alt="">
      </van-col>
      <van-col :span="14" class="rightContent">
        <span class="title">
          {{data.cardTitle}}
        </span>
        <span v-if="data.cardHot" class="dotNum"></span>
        <p>{{data.cardDesc}}</p>
      </van-col>
      <van-col :span="6" style="line-height: 3.75rem">
        <van-button round type="info" size="small" @click="onDetails(data)">前往处理</van-button>
      </van-col>
    </van-row>
    <van-row class="card" v-else>
      <van-col :span="4" style="padding: 0.3125rem">
        <img :src="data.cardImg" alt="">
      </van-col>
      <van-col :span="20" class="rightContent">
        <span class="title">
          {{data.cardTitle}}
        </span>
        <span v-if="data.cardHot" class="dotNum"></span>
        <p>{{data.cardDesc}}</p>
      </van-col>
    </van-row>
  </div>

</template>

<script>
  import messageAPI from '../../../api/messageAPI.js'
  import realTimeInspectionAPI from '../../../api/workAPI/realTimeInspectionAPI.js'
  export default {
    props: ['data'],
    data() {
      return {
      }
    },
    methods:{
      onDetails(data) {
        if (data.cardId === 1) {
          let datas = {
            item: data.itemData,
            status: 0
          }
          localStorage.setItem('fixedDetails', JSON.stringify(datas))
          this.$router.push({
            name: 'MyInspection',
          })
        } else if (data.cardId === 2) {
          this.$router.push({
            name: 'RectificationTask',
            params: {
              item: data.itemData,
              status: 1
            }
          })
        } else if (data.cardId === 3) {
          let realTimeDetails = {
            itemData: data.itemData,
            status: 1
          }
          localStorage.setItem('realTimeDetails', JSON.stringify(realTimeDetails))
          this.$router.push({
            name: 'RealTimeRectificationTask'
          })
        } else if (data.cardId === 4) {
          let messageId = []
          messageId.push(data.itemData.messageId)
          messageAPI.delRead(messageId).then(res => {
            realTimeInspectionAPI.getAbarbeitungDetails(data.itemData.referId).then(resDatas => {
              this.$router.push({
                name: 'RealTimeTaskDetails',
                params:{
                  status: 0,
                  itemData: resDatas,
                  selectType: 2
                }
              })
            })
          })
        } else if (data.cardId === 8) {
          let messageId = []
          messageId.push(data.itemData.messageId)
          messageAPI.delRead(messageId).then(res => {
            this.$router.push({
              name: 'IllegalQuery'
            })
          })
        } else if (data.cardId === 10) {
          localStorage.setItem('overTimeData', JSON.stringify(data.itemData))
          this.$router.push({
            name: 'OvertimePayDetails'
          })
          // let messageId = []
          // messageId.push(data.itemData.messageId)
          // messageAPI.delRead(messageId).then(res => {
          //   localStorage.setItem('overTimeData', JSON.stringify(data.itemData))
          //   this.$router.push({
          //     name: 'OvertimePayDetails'
          //   })
          // })
        } else if (data.cardId === 15) {
          localStorage.setItem('hotCardDetails', JSON.stringify(data.itemData))
          this.$router.push({
            name: 'HotCardDetails'
          })
          // let messageId = []
          // messageId.push(data.itemData.messageId)
          // messageAPI.delRead(messageId).then(res => {
          //   localStorage.setItem('hotCardDetails', JSON.stringify(data.itemData))
          //   this.$router.push({
          //     name: 'HotCardDetails'
          //   })
          // })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .card{
    padding: 0.625rem;
    font-size: 0.875rem;
    border-top: 0.0625rem solid #ececec;
    .rightContent{
      position: relative;
      padding: 0.3125rem;
      .title{
        padding-right: 0.3125rem;
      }
      .dotNum{
        font-size: 0.75rem;
        position: absolute;
        top: 0.3125rem;
        width: 0.375rem;
        height: 0.375rem;
        text-align: center;
        line-height: 1.25rem;
        color: #fff;
        background-color: #f00;
        border-radius: 50%;
      }
      .num{
        font-size: 0.75rem;
        position: absolute;
        top: -0.3125rem;
        right: -1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        text-align: center;
        line-height: 1.25rem;
        color: #fff;
        background-color: #f00;
        border-radius: 50%;
      }
      .cardTime{
        text-align: right;
      }
      .btn{
        text-align: right;
      }
      p{
        color: #999;
        margin: 0.3125rem 0;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    .hot{
      text-align: center;
      font-size: 0.75rem;
      color: #fff;
      background-color: #FF0000;
      line-height: 0.9375rem;
      width: 0.9375rem;
      height: 0.9375rem;
      border-radius: 50%;
    }
    img{
      width: 100%;
    }
  }
</style>
